
<!--
 * @Author: White
 * @description: 更换主题颜色
 * @LastEditTime: 2021-08-25 10:02:33
-->

<template>
    <div class="color">
        <el-popover
            placement="bottom"
            :width="140"
            trigger="click">
            <div class="color-content">
                <div class="color-item" 
                    v-for="(item, index) in list" 
                    :key="index" 
                    @click="selectTheme(item.theme)">
                    <div class="color-item-circle" :style="{ backgroundColor: item.theme.color }"></div>
                    <div class="color-item-text">{{ item.name }}</div>
                </div>
            </div>
            <template #reference>
                <div class="change">
                    <svg t="1629791538526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1629" width="200" height="200"><path d="M961.664 259.2l-187.648-148.544C740.992 84.48 682.112 64 640 64L576 64l0 64 0 32C576 177.664 561.664 192 544 192l-64 0C462.336 192 448 177.664 448 160L448 128 448 64 385.984 64 384 64l0 0.192C342.144 64.768 284.544 84.48 251.776 109.824L63.104 255.552C27.136 283.328 0 338.56 0 384l0 64.064c0 43.328 24 101.248 54.656 131.904L192 717.248 192 832c0 70.592 57.408 128 128 128l384 0c70.592 0 128-57.408 128-128l0-128.64 134.656-124.416C999.36 548.8 1024 492.48 1024 448L1024 388.032C1024 342.656 997.184 287.296 961.664 259.2zM960 448c0 26.176-17.472 66.176-36.672 83.968L832 616.32 832 448l-64 0 0 384c0 35.328-28.672 64-64 64L320 896c-35.264 0-64-28.672-64-64L256 448 192 448l0 178.752L99.904 534.656C81.088 515.904 64 474.624 64 448.064L64 384c0-25.28 18.24-62.336 38.208-77.824l188.672-145.728C312.832 143.552 355.648 128.832 384 128.192L384 160C384 212.928 427.072 256 480 256l64 0C596.928 256 640 212.928 640 160L640 128c28.096 0 72.256 15.36 94.336 32.832l187.648 148.544C941.888 325.12 960 362.624 960 388.032L960 448z" p-id="1630" fill="#bfbfbf"></path></svg>
                </div>
            </template>
        </el-popover>
    </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import { getSetToken } from '@/utils/localstrong'
import { useStore } from 'vuex'
export default {
    setup () {
        const store = useStore()
        const theme = computed(() => store.state.theme)
        const type = reactive({
            list: [
                { name: '浅色', type: '1', theme: { color: '#f5f5f5', text: '#000', Mcolor: '#fff' }},
                { name: '红色', type: '2', theme: { color: '#d34942', text: '#fff', Mcolor: '#fff' }},
                { name: '深色', type: '3', theme: { color: '#1d1d1d', text: '#fff', Mcolor: '#212121' }}
            ]
        })
        
        const selectTheme = (val) => {
            getSetToken('theme', val)
            store.commit('setTheme', val)
        }

        return {
            ...toRefs(type),
            selectTheme,
            theme
        }
    }
}
</script>

<style lang="scss" scoped>
.color-content {
    display: flex;
    justify-content: space-around;
    .color-item {
        cursor: pointer;
        .color-item-circle {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-bottom: 6px;
            background-color: red;
        }
        .color-item-text {
            cursor: pointer;
            color: #505050;
            font-size: 2px;
        }
    }
}
.change {
    svg {
        width: 20px;
        height: 20px;
    }
}
</style>
